// 项目详情模态框功能
const projectsData = {
    'pvmaster': {
        title: 'PVMaster分布式智能光伏设计大师',
        type: '新能源、SaaS',
        period: '2024.11-至今',
        introduction: '针对分布式发电站开发的自动化设计工具。基于卫星图、无人机现场踏勘、CAD图纸等基础数据，实现电站分钟级设计能力。',
        responsibilities: [
            '对接用户，梳理业务场景及业务逻辑，挖掘和细化需求',
            '对接开发，制作包含产品流程图，业务泳道图及产品用例的产品需求文档',
            '对接客户，制作产品相关手册，提供产品培训，并根据用户反馈，持续改进产品'
        ],
        achievements: [
            {
                type: 'stats',
                items: [
                    { number: '2000+', label: '月活用户' },
                    { number: '4万', label: '月均流水' }
                ]
            }
        ],
        demo: 'https://pvdesign.longi.com:18600'
    },

    'erp': {
        title: '变形积木企业管理系统',
        type: 'to B、数字化转型',
        period: '2022.5-2024.8',
        introduction: '企业内部管理系统，包含销售订单管理，MRP、生产计划、生产工单、成本核算、物流计划等模块。通过对采购、生产、物流等资源的全面统筹和协调，快速保质保量完成交付计划的需求。并协助计划员及生产车间实现精益生产及无纸化报工。',
        responsibilities: [
            '需求调研及分析，重新梳理工厂管理流程及财务成本核算方式',
            '制定系统规划及上线版本，制作版本原型及PRD文档',
            '对接研发，跟进系统开发及测试',
            '编写用户操作手册及引导业务熟悉产品，组织业务验收',
            '长期跟进业务使用情况，及时优化及改进系统'
        ],
        achievements: [
            {
                type: 'grid',
                items: [
                    {
                        icon: 'shopping-cart',
                        title: '采购自动化',
                        desc: '利用MRP自动计算物料需求计划，缩短采购周期10%'
                    },
                    {
                        icon: 'warehouse',
                        title: '库存管理',
                        desc: '应用条码技术，实现扫码出入库，大幅提升管理效率'
                    },
                    {
                        icon: 'industry',
                        title: '生产管理',
                        desc: '实现无纸化报工，核算数据采集时效提升90%'
                    },
                    {
                        icon: 'truck',
                        title: '物流优化',
                        desc: '开发多目标优化算法，运输成本降低10%'
                    },
                    {
                        icon: 'desktop',
                        title: '工厂监控',
                        desc: '支持实时查看工厂人员工作情况'
                    },
                    {
                        icon: 'clock',
                        title: '效率提升',
                        desc: '订单交付周期从30天缩减为20天'
                    }
                ]
            }
        ]
    },

    'xpam': {
        title: 'SecMind xPAM特权账号管理系统',
        type: 'toG、to B',
        period: '2020.5-2022.5',
        introduction: '针对特权账号（监控器、服务器、安全设备、网络设备等）的全生命周期管理，涵盖账号发现、存储改密、权限管控、维护巡检、操作监控、安全审计全流程。',
        responsibilities: [
            '依据公司战略，根据市场调研及竞品分析确定产品蓝图',
            '制定产品版本演进路线及版本内容（含需求分析、原型图、PRD等）',
            '准备产品相关资料（产品白皮书、招标参数等）及产品宣讲',
            '根据产品市场申请相关资质证书',
            '跟进并维护客户案例，支持产品销售工作'
        ],
        achievements: [
            {
                type: 'highlight',
                items: [
                    {
                        icon: 'certificate',
                        content: '成功申请计算机信息系统安全专用产品销售许可证'
                    }
                ]
            },
            {
                type: 'clients',
                title: '经典案例',
                items: ['上海教委', '上海环境监测中心', '贵州高速', '叮咚买菜']
            }
        ],
        demo: 'https://www.wandoutech.com/product.html'
    },

    'guardian': {
        title: 'SecMind安全管家',
        type: 'toG、企业IT资产管理',
        period: '2020.5-2022.5',
        introduction: '通过豌豆SecMind构建"人-技术-管理"三位一体的综合信息安全管理体系，围绕资产完全全方面的安全运营管理（漏扫、等保、应急等）。',
        responsibilities: [
            '收集多方需求，规划产品版本',
            '根据规划设计产品，制作原型对接开发',
            '提供产品相关资料：如招标参数、使用培训等',
            '参与现场实施，并跟据客户反馈进行更新迭代'
        ],
        achievements: [
            {
                type: 'highlight',
                items: [
                    {
                        icon: 'trophy',
                        content: '在多个招标项目中成功中标，如上海国际港务集团--现代化超大型港口的数据安全避风港项目'
                    },
                    {
                        icon: 'award',
                        content: '2020年ISG网络安全技能竞赛中作为竞赛平台'
                    }
                ]
            }
        ]
    },

    'academy': {
        title: '豌豆学院',
        type: 'toG、教育',
        period: '2020.5-2022.5',
        introduction: '豌豆作为数字时代前沿安全技术人才的孵化器，与腾讯合作，对接多款第三方课程及自研发多款安全课程，为各大高校提供教学平台和CTF实战平台，将教学和实训相结合。',
        responsibilities: [
            '对接高校，梳理优化需求',
            '制作PRD等相关材料，对接研发',
            '提供产品相关使用培训及产品资料更新',
            '参与现场实施，并跟据客户反馈进行更新迭代'
        ],
        achievements: [
            {
                type: 'highlight',
                items: [
                    {
                        icon: 'university',
                        content: '与山东商院等多个高校建立合作关系'
                    },
                    {
                        icon: 'graduation-cap',
                        content: '打造完整的网络安全人才培养体系'
                    }
                ]
            }
        ]
    },

    'surmax': {
        title: 'SURMAX ERP智能企业综合管理系统',
        type: 'to B、数字化转型',
        period: '2017.9-2020.3',
        introduction: '锋泾集团作为集团式公司，多元化发展，除国际业务外，国内有自己的分销商、经销商，另有直达C端客户零售业务，如淘宝、京东等第三方电商平台、自己的官方平台、各地的零售门店。SURMAX系统作为整个企业综合管理生态系统中综合管理平台，包含了订单管理、采购管理、生产管理、库存管理、人力资源管理及财务管理等。',
        responsibilities: [
            '与业务人员对接，搜集需求',
            '细化及梳理业务流程，协助开发',
            '根据CTO对需求的评估，负责产品开发的进度管理及跟踪，组织用户测试，验收',
            '编写产品说明书，引导用户熟悉，使用产品',
            '负责测试后产品改进，bug跟踪，收集改进意见'
        ],
        achievements: [
            {
                type: 'highlight',
                items: [
                    {
                        icon: 'link',
                        content: '成功建立供应链，实现企业级别的订单互联及订单状态的实时更新（涵盖排期，生产，出库等状态）'
                    },
                    {
                        icon: 'chart-line',
                        content: '显著提升企业运营效率和管理水平'
                    }
                ]
            }
        ],
        demo: 'https://www.mwuat.com'
    },
    'wizard': {
        title: '巫师英语',
        type: 'AI、教育、私域运营',
        period: '2023',
        introduction: '根据二语习得法（像学母语一样学英语），孩子的英语启蒙需要英语环境，积累大量听力词汇，但是国内大多数父母自身无法提供相应的环境，巫师英语根据国外分级阅读材料RAZ制定相应的阅读绘本，配合AI自动解答孩子疑难问题。',
        responsibilities: [
            '从0到1参与项目整体规划，确定产品定位及发展方向',
            '分析需求并进行归纳整理，制定产品功能路线图',
            '制作原型，设计产品界面及交互流程',
            '参与产品推广及运营，制定运营策略和推广方案',
            '根据用户反馈改进需求，进行版本迭代优化'
        ],
        achievements: [
            {
                type: 'highlight',
                items: [
                    {
                        icon: 'book-reader',
                        content: '基于RAZ分级阅读体系，打造适合中国儿童的英语学习路径'
                    },
                    {
                        icon: 'robot',
                        content: '集成AI辅导功能，为孩子提供24小时在线答疑服务'
                    },
                    {
                        icon: 'users',
                        content: '通过私域运营，建立稳定的用户社群'
                    }
                ]
            }
        ]
    },
    'secmind_mp': {
        title: 'SecMind安全管家小程序',
        type: '电商、小程序、运营',
        period: '2021',
        introduction: '安全服务移动端解决方案，为企业提供便捷的安全服务购买和管理功能。',
        responsibilities: [
            '从0到1参与项目整体规划，确定产品定位及发展方向',
            '分析需求并进行归纳整理，制定产品功能路线图',
            '制作原型及UI图，设计产品界面及交互流程',
            '参与产品推广及运营，制定运营策略和推广方案',
            '根据用户反馈改进需求，进行版本迭代优化'
        ],
        achievements: [
            {
                type: 'highlight',
                items: [
                    {
                        icon: 'mobile-alt',
                        content: '打造移动端安全服务购买平台'
                    },
                    {
                        icon: 'shopping-cart',
                        content: '实现安全服务在线下单及进度跟踪'
                    }
                ]
            }
        ]
    },

    'meiwu': {
        title: '美武商城',
        type: '电商、小程序、运营',
        period: '2019',
        introduction: '电商平台解决方案，为企业提供线上销售渠道。',
        responsibilities: [
            '从0到1参与项目整体规划，确定产品定位及发展方向',
            '分析需求并进行归纳整理，制定产品功能路线图',
            '制作原型及UI图，设计产品界面及交互流程',
            '参与产品推广及运营，制定运营策略和推广方案',
            '根据用户反馈改进需求，进行版本迭代优化'
        ],
        achievements: [
            {
                type: 'highlight',
                items: [
                    {
                        icon: 'store',
                        content: '搭建完整的电商销售体系'
                    },
                    {
                        icon: 'chart-line',
                        content: '提升企业线上销售转化率'
                    }
                ]
            }
        ]
    },

    'prismlight': {
        title: 'PrismLight',
        type: '独立站',
        period: '2023',
        introduction: '跨境电商独立站平台',
        responsibilities: [
            '从0到1参与项目整体规划，确定产品定位及发展方向',
            '分析需求并进行归纳整理，制定产品功能路线图',
            '制作原型及UI图，设计产品界面及交互流程',
            '参与产品推广及运营，制定运营策略和推广方案',
            '根据用户反馈改进需求，进行版本迭代优化'
        ],
        achievements: [
            {
                type: 'highlight',
                items: [
                    {
                        icon: 'globe',
                        content: '建立跨境电商独立站平台'
                    },
                    {
                        icon: 'shopping-bag',
                        content: '实现国际市场的线上销售'
                    }
                ]
            }
        ],
        demo: 'https://prismlight.com.au/'
    }
};

// 在初始化函数中添加数据绑定
function initializeProjectModals() {
    const projectCards = document.querySelectorAll('.project-card');
    
    projectCards.forEach(card => {
        card.addEventListener('click', (e) => {
            // 如果点击的是链接，不触发模态框
            if (e.target.closest('.project-link')) return;
            
            const projectId = card.dataset.project;
            const projectData = projectsData[projectId];
            if (projectData) {
                showProjectModal(projectData);
            }
        });
    });
}

function showProjectModal(project) {
    const modal = document.createElement('div');
    modal.className = 'modal';
    modal.innerHTML = `
        <div class="modal-content">
            <span class="modal-close">&times;</span>
            <div class="modal-header">
                <h3>${project.title}</h3>
                <span class="project-type">${project.type}</span>
            </div>
            <div class="project-nav">
                <div class="project-nav-item active" data-tab="intro">项目介绍</div>
                <div class="project-nav-item" data-tab="responsibility">工作职责</div>
                <div class="project-nav-item" data-tab="achievement">工作成果</div>
                ${project.demo ? '<div class="project-nav-item" data-tab="demo">演示</div>' : ''}
            </div>
            <div class="modal-body">
                <!-- 内容将通过 JavaScript 动态加载 -->
            </div>
        </div>
    `;

    document.body.appendChild(modal);
    modal.style.display = 'block';

    // 关闭按钮功能
    const closeBtn = modal.querySelector('.modal-close');
    closeBtn.onclick = () => {
        modal.remove();
    };

    // 点击模态框外部关闭
    modal.onclick = (e) => {
        if (e.target === modal) {
            modal.remove();
        }
    };

    // 标签切换功能
    const navItems = modal.querySelectorAll('.project-nav-item');
    navItems.forEach(item => {
        item.addEventListener('click', () => {
            navItems.forEach(i => i.classList.remove('active'));
            item.classList.add('active');
            updateModalContent(modal, project, item.dataset.tab);
        });
    });

    // 初始化显示项目介绍
    updateModalContent(modal, project, 'intro');
}

function updateModalContent(modal, project, tab) {
    const modalBody = modal.querySelector('.modal-body');
    let content = '';

    switch(tab) {
        case 'intro':
            content = `
                <div class="project-intro">
                    <h4><i class="fas fa-info-circle"></i> 产品介绍</h4>
                    <p>${project.introduction}</p>
                </div>
            `;
            break;
        case 'responsibility':
            content = `
                <div class="project-responsibility">
                    <h4><i class="fas fa-tasks"></i> 工作职责</h4>
                    <ul>
                        ${project.responsibilities.map(r => `<li>${r}</li>`).join('')}
                    </ul>
                </div>
            `;
            break;
        case 'achievement':
            content = `
                <div class="project-achievement">
                    <h4><i class="fas fa-trophy"></i> 工作成果</h4>
                    ${generateAchievementContent(project.achievements)}
                </div>
            `;
            break;
        case 'demo':
            content = `
                <div class="project-demo">
                    <h4><i class="fas fa-play-circle"></i> 项目演示</h4>
                    ${project.demo}
                </div>
            `;
            break;
    }

    modalBody.innerHTML = content;
}

// 在 updateModalContent 函数之前添加
function generateAchievementContent(achievements) {
    let content = '';
    
    achievements.forEach(achievement => {
        switch(achievement.type) {
            case 'stats':
                content += `
                    <div class="achievement-items">
                        ${achievement.items.map(item => `
                            <div class="achievement-item">
                                <span class="achievement-number">${item.number}</span>
                                <span class="achievement-label">${item.label}</span>
                            </div>
                        `).join('')}
                    </div>
                `;
                break;
            case 'grid':
                content += `
                    <div class="achievement-grid">
                        ${achievement.items.map(item => `
                            <div class="achievement-card">
                                <i class="fas fa-${item.icon}"></i>
                                <h5>${item.title}</h5>
                                <p>${item.desc}</p>
                            </div>
                        `).join('')}
                    </div>
                `;
                break;
            case 'highlight':
                content += `
                    ${achievement.items.map(item => `
                        <div class="achievement-highlight">
                            <i class="fas fa-${item.icon}"></i>
                            <p>${item.content}</p>
                        </div>
                    `).join('')}
                `;
                break;
            case 'clients':
                content += `
                    <div class="achievement-clients">
                        <h5><i class="fas fa-building"></i> ${achievement.title}</h5>
                        <div class="client-tags">
                            ${achievement.items.map(client => `
                                <span>${client}</span>
                            `).join('')}
                        </div>
                    </div>
                `;
                break;
        }
    });
    
    return content;
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initializeProjectModals);